<template>
	<div>
		<el-form :inline="true" class="demo-form-inline" :disabled="disabled">
			<el-form-item label="一级分类">
				<!-- v-model收集选中的选项 给select绑定事件 -->
				<el-select placeholder="请选择一级列表" v-model="(category1Id as number)" @change="getCategory2List">
					<el-option 
						v-for="item in category1List"
						:key="item.id"
						:label="item.name" 
						:value="item.id"
					/>
				</el-select>
				
			</el-form-item>
			<el-form-item label="二级分类">
				<el-select placeholder="选择二级列表" v-model="(category2Id as number)" @change="getCategory3List" >
					<el-option 
						v-for="item in category2List"
						:key="item.id"
						:label="item.name" 
						:value="item.id"
					/>
				</el-select>
			</el-form-item>

			<el-form-item label="三级分类">
        <el-select placeholder="选择三级列表" v-model="(category3Id as number)">
					<el-option 
						v-for="item in category3List"
						:key="item.id"
						:label="item.name" 
						:value="item.id"
					/>
				</el-select>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import {useCategoryStore} from "@/stores/category"
import { storeToRefs } from "pinia";
import { onMounted } from "vue";

// 获取state对象
const categoryStore = useCategoryStore()

// 初始化  获取一级列表数据
onMounted(()=>{
	categoryStore.getCategory1List()
})
// 把数据列表 和 id 解构出来
const { 
	category1List, 
	category1Id ,
	category2List,
	category2Id,
	category3List, 
	category3Id
} = storeToRefs(categoryStore)


// 选择一级列表 处理二级列表
const getCategory2List = (category1Id:number) => {
	// 先清空二级和三级所有数据
	category2List.value = []
	category2Id.value = null
	category3List.value = []
	category3Id.value = null

	categoryStore.getCategory2List(category1Id)
}

// 选择二级列表 处理三级列表
const getCategory3List = (category2Id:number) => {
	// 清空所有三级
	category3List.value = []
	category3Id.value = null
	categoryStore.getCategory3List(category2Id)
}

// 接收值 准备禁用三级联动
defineProps(['disabled'])

</script>

<style scoped></style>
